<script setup>
	import config from './config'
	import { computed, onMounted, reactive, watch } from 'vue'
	import { cloneDeep } from 'lodash-es'
	import datasetApi from '@/views/plugin/dashboard/api/datasetApi'

	const emit = defineEmits(['update:config'])
	const props = defineProps({
		config: {
			type: Object,
			default: () => cloneDeep(config)
		}
	})

	// 创建本地配置缓存，用于存储用户修改但尚未确认的配置
	const localConfig = reactive(cloneDeep(props.config || config))

	// 移除hasChanges，使用父组件抽屉中的取消和保存功能

	// 初始化本地配置
	onMounted(() => {
		Object.assign(localConfig, cloneDeep(props.config || config))
	})

	// 监听props.config的变化，更新本地配置
	watch(
		() => props.config,
		(newConfig) => {
			if (newConfig) {
				Object.assign(localConfig, cloneDeep(newConfig))
			}
		},
		{ deep: true }
	)

	// 移除确认和重置修改的方法，使用父组件抽屉中的取消和保存功能
	const container = computed(() => ({
		padding: `${localConfig.style.paddingT}px ${localConfig.style.paddingR}px ${localConfig.style.paddingB}px ${localConfig.style.paddingL}px`,
		background: localConfig.style.bgColor,
		borderColor: localConfig.style.borderColor,
		borderWidth: localConfig.style.borderWidth + 'px',
		borderStyle: localConfig.style.borderStyle,
		borderTopLeftRadius: localConfig.style.bgRTL + 'px',
		borderTopRightRadius: localConfig.style.bgRTR + 'px',
		borderBottomLeftRadius: localConfig.style.bgRBL + 'px',
		borderBottomRightRadius: localConfig.style.bgRBR + 'px',
		flexDirection: 'column',
		boxShadow: `${localConfig.style.shadowX}px ${localConfig.style.shadowY}px ${localConfig.style.shadowDegree}px ${localConfig.style.shadowColor}`
	}))
	const titleStyle = computed(() => ({
		justifyContent: localConfig.style.align,
		fontSize: localConfig.style.titleSize + 'px',
		color: localConfig.style.titleColor,
		fontWeight: localConfig.style.titleWeight ? 800 : 500,
		fontStyle: localConfig.style.titleStyle ? 'italic' : '',
		textDecoration: localConfig.style.titleLine ? 'underline' : ''
	}))
	const titleIconStyle = computed(() => ({
		fontSize: localConfig.style.titleIconSize + 'px',
		color: localConfig.style.titleIconColor
	}))

	const titleEndStyle = computed(() => ({
		fontSize: localConfig.style.titleEndSize + 'px',
		color: localConfig.style.titleEndColor,
		fontWeight: localConfig.style.titleEndWeight ? 800 : 500,
		fontStyle: localConfig.style.titleEndStyle ? 'italic' : '',
		textDecoration: localConfig.style.titleEndLine ? 'underline' : ''
	}))
	const titleEndIconStyle = computed(() => ({
		fontSize: localConfig.style.titleEndIconSize + 'px',
		color: localConfig.style.titleEndIconColor
	}))

	const mainBoxStyle = computed(() => ({
		display: 'flex',
		width: 100 / localConfig.style.rowNum + '%',
		alignItems: 'center',
		justifyContent: localConfig.style.itemAlign,
		padding: '5px 10px',
		cursor: 'pointer'
	}))

	const textStyle = computed(() => ({
		fontSize: localConfig.style.textSize + 'px',
		color: localConfig.style.textColor,
		fontWeight: localConfig.style.textWeight ? 800 : 500,
		fontStyle: localConfig.style.textStyle ? 'italic' : '',
		textDecoration: localConfig.style.textLine ? 'underline' : ''
	}))

	const iconBoxStyle = computed(() => ({
		display: localConfig.style.iconShow ? 'flex' : 'none',
		backgroundColor: localConfig.style.iconBgColor,
		height: localConfig.style.iconBgSize + 'px',
		width: localConfig.style.iconBgSize + 'px',
		borderTopLeftRadius: localConfig.style.iconRTL + 'px',
		borderTopRightRadius: localConfig.style.iconRTR + 'px',
		borderBottomLeftRadius: localConfig.style.iconRBL + 'px',
		borderBottomRightRadius: localConfig.style.iconRBR + 'px'
	}))

	const subContentStyle = computed(() => ({
		fontSize: localConfig.style.subContentSize + 'px',
		color: localConfig.style.subContentColor,
		fontWeight: localConfig.style.subContentWeight ? 800 : 500,
		fontStyle: localConfig.style.subContentStyle ? 'italic' : '',
		textDecoration: localConfig.style.subContentLine ? 'underline' : ''
	}))
	const dataBoxStyle = computed(() => ({
		borderBottomColor: localConfig.style.lineColor,
		borderBottomWidth: localConfig.style.lineWidth + 'px',
		borderBottomStyle: localConfig.style.lineStyle
	}))
	const iconStyle = computed(() => ({
		fontSize: localConfig.style.iconSize + 'px',
		color: localConfig.style.iconColor
	}))

	const dataStyle = computed(() => ({
		fontSize: localConfig.style.dataSize + 'px',
		color: localConfig.style.dataColor,
		fontWeight: localConfig.style.dataWeight ? 800 : 500,
		fontStyle: localConfig.style.dataStyle ? 'italic' : '',
		textDecoration: localConfig.style.dataLine ? 'underline' : '',
		marginTop: !localConfig.style.dataUp ? localConfig.style.spacing + 'px' : '0px',
		marginBottom: localConfig.style.dataUp ? localConfig.style.spacing + 'px' : '0px'
	}))

	const titleMoreStyle = computed(() => ({
		color: localConfig.style.iconColor,
		fontSize: localConfig.style.iconSize + 'px'
	}))
	// 数据源 --- 调接口
	watch(
		() => localConfig.dataSetConfig.dataSetJson,
		(newVal, oldVal) => {
			const dataSetJson = localConfig.dataSetConfig.dataSetJson
			const isNull = dataSetJson && !!Object.keys(dataSetJson).length
			if (localConfig.dataSetConfig.dataSetType === 1 && isNull && newVal !== oldVal) {
				// 模拟接口返回下拉数据
				datasetApi.preview(dataSetJson).then((res) => {
					const dataSource = res || []
					// 模拟接口返回数据源
					dataSet.listValue.value = dataSource
				})
			}
		},
		{ deep: true, immediate: true }
	)
	// 接数据源
	const dataSet = reactive(cloneDeep(localConfig.data))
	// 组件绑定数据 静态 / 数据源
	const formState = computed(() => {
		if (localConfig.dataSetConfig.dataSetType === 1) {
			return dataSet
		} else {
			return localConfig.data
		}
	})
	const list = computed(() => {
		// 直接使用字段名，不使用别名
		return formState.value.listValue.value.map((item) => {
			// 如果是数据源情况，使用选择的字段名
			if (props.config.dataSetConfig.dataSetType === 1) {
				return {
					title: item[props.config.data.title?.field] || '',
					numValue: item[props.config.data.numValue?.field] || '',
					iconKey: item[props.config.data.iconKey.field] || '',
					iconColor: item[props.config.data.iconColor.field] || '',
					iconBgColor: item[props.config.data.iconBgColor.field] || '',
					link: item[props.config.data.link.field] || ''
				}
			} else {
				// 静态数据情况，直接使用字段名
				return {
					title: item['title'] || '',
					numValue: item['numValue'] || '',
					iconKey: item['iconKey'] || '',
					iconColor: item['iconColor'] || '',
					iconBgColor: item['iconBgColor'] || '',
					link: item['link'] || ''
				}
			}
		})
	})
	// 点击组件跳转链接
	const goLink = (link) => {
		window.open(link, '_blank')
	}

	// 判断是否为Ant Design图标
	const isAntdIcon = (iconKey) => {
		// Ant Design图标通常以 -outlined, -filled, -twotone 结尾
		return iconKey && (iconKey.includes('-outlined') || iconKey.includes('-filled') || iconKey.includes('-twotone'))
	}
</script>

<template>
	<div class="container flex" :style="container">
		<div class="flex justify-between mb-[15px]" :style="{ justifyContent: localConfig.style.align }">
			<div class="flex items-center">
				<span
					:class="['mr-[8px]', 'iconfont', localConfig.style.titleIcon]"
					:style="titleIconStyle"
					v-if="localConfig.style.titleIconShow"
				></span>
				<div :style="titleStyle">{{ localConfig.style.title }}</div>
			</div>
			<div v-if="localConfig.style.align === 'space-between'" class="flex items-center">
				<div :style="titleEndStyle" v-if="localConfig.style.titleEndShow">{{ localConfig.style.titleEnd }}</div>
				<span
					:class="['ml-[8px]', 'iconfont', localConfig.style.titleEndIcon]"
					:style="titleEndIconStyle"
					v-if="localConfig.style.titleEndIconShow"
				></span>
			</div>
		</div>
		<div class="flex flex-wrap flex-1 overflow-hidden">
			<template v-for="(item, index) in list" :key="index">
				<div :style="mainBoxStyle" @click="goLink(item.link)">
					<!-- <div
						@click="goLink(item.link)"
						:style="{ ...iconBoxStyle, background: item.iconBgcolor, color: item.iconColor }"
						class="iconfont_box"
					>
						<div :class="['iconfont', item.icon]"></div>
					</div>
					<div @click="goLink(item.link)" :style="textStyle">{{ item.title }}</div> -->
					<div
						class="iconfont_box"
						:style="{
							...iconBoxStyle,
							background: item.iconBgColor,
							color: item.iconColor
						}"
						v-if="localConfig.style.iconPosition === 'left'"
					>
						<component :is="item.iconKey" v-if="item.iconKey && isAntdIcon(item.iconKey)" :style="{ ...iconStyle }" />
						<template v-for="items in props.config.style.columns" v-else :key="items.key">
							<i
								v-if="items.key == item.iconKey"
								:key="items.key"
								:class="['iconfont', items.icon]"
								:style="{ ...iconStyle }"
							></i>
						</template>
					</div>
					<div class="ml-2 mr-2" :style="{ textAlign: localConfig.style.align }">
						<span class="font-7" :style="{ ...textStyle }" v-if="!localConfig.style.dataUp">{{ item.title }}</span>
						<div :style="{ ...dataStyle }" v-if="localConfig.style.dataShow">
							{{ item.numValue }}
						</div>
						<span class="font-7" :style="{ ...textStyle }" v-if="localConfig.style.dataUp">{{ item.title }}</span>
					</div>
					<div
						@click="goLink(item.link)"
						class="iconfont_box"
						:style="{
							...iconBoxStyle,
							background: item.iconBgColor,
							color: item.iconColor
						}"
						v-if="localConfig.style.iconPosition === 'right'"
					>
						<component :is="item.iconKey" v-if="item.iconKey && isAntdIcon(item.iconKey)" :style="{ ...iconStyle }" />
						<template v-for="items in props.config.style.columns" v-else>
							<i
								v-if="items.key == item.iconKey"
								:key="items.key"
								:class="['iconfont', items.icon]"
								:style="{ ...iconStyle }"
							></i>
						</template>
					</div>
				</div>
			</template>
		</div>
	</div>
</template>

<style scoped lang="less">
	.container {
		// 修改圆角半径为不同的值
		// border-radius: 10px; // 调整为图片中的圆角弧度
		// 添加阴影效果
		// box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		padding: 25px; // 增加内边距
		overflow: hidden;
		height: 100%;
		width: 100%;
		// background-color: white;
	}

	.column-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 1px;
		margin: 5px;
	}
	.type-icon {
		border: 1px solid #ccc;
		padding: 4px 10px;
		border-radius: 2px;
	}
	.iconfont_box {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		width: 40px; // 确保宽度和高度相同以实现圆形
		height: 40px;
		background-color: #90caf8e2;
	}
</style>
